<template>
  <!-- 流转卡调整 -->
  <div class="main-container" id="main-container">
    <div style="background: #fff; height: 100%" id="workshopCancelStocks">
      <PageTabelLayout>
        <template #pageHeader>
          <div class="my-header" style="padding: 10px;box-sizing: border-box;" v-if="headerShow">
            <a-form size="small" :model="searchData" auto-label-width layout="inline">
              <!-- <a-form-item label="流转卡号">
                  <a-input class="bacClass" style="width:200px" allow-clear
                      v-model="searchData.flowCardCode" />
              </a-form-item> -->
              <a-form-item label="流转卡号">
                <a-select popup-container="html" style="width:200px" class="bacClass" v-model="searchData.flowCardCode"
                          @focus="focusSel4" @search="handleSearch4" @change="cardChange" :loading4="loading4"
                          allow-clear allow-search>
                  <a-option v-for="item in pageData.cardList" :value="item.flowCardCode">
                    {{ item.flowCardCode }}
                  </a-option>
                </a-select>
              </a-form-item>
              <a-form-item label="开单日期">
                <a-range-picker popup-container="html" @change="dateChange" show-time class="bacClass"
                                style="width:400px"
                                allow-clear/>
              </a-form-item>
              <a-form-item label="客户名称">
                <a-input class="bacClass" style="width:200px" allow-clear v-model="searchData.customName"/>
              </a-form-item>
            </a-form>
          </div>
          <div class="my-divisders">
            <a-divider orientation="center">
              <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18"/>
              <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18"/>
            </a-divider>
          </div>
          <div class="my-tool-bar" style="margin-bottom: 10px;">
            <Toolbar :items="['缸卡终止', '取消终止', '查询']" @select="selectHandler" @suspend="IsuspendHandler(1)"
                     @cancelSuspend="IsuspendHandler(0)" v-if="handlerState === 1"/>
            <Toolbar :items="['查询', '导出']" @select="selectHandler" v-else @export="exportHandler"/>
          </div>
        </template>
        <template #pageTabel>
          <div style="height:100%;">
            <a-tabs   :lazy-load="true" justify :default-active-key="1" trigger="click" @change="changHandler">
              <a-tab-pane :key="1" title="缸卡信息">
                <div style="height:90%;">
                  <cylinderAjuctInfo :searchData="searchData" @change-adjuct="changeAdjuct"/>
                </div>
              </a-tab-pane>
              <a-tab-pane :key="2" title="缸卡明细信息">
                <cylinderDetailInfo :searchData="searchData" @change-adjuct="changeAdjuct"/>
              </a-tab-pane>
            </a-tabs>
          </div>
        </template>
      </PageTabelLayout>
    </div>
    <a-drawer :drawer-style="{ zIndex: 9999 }" height="100%" unmountOnClose :visible="pageData.showAdd"
              :mask-closable="false" placement="bottom" @cancel="pageData.showAdd = false">
      <template #title>调整</template>
      <a-form ref="formRef" style="margin-top:20px" layout="horizontal" auto-label-width :model="dataForm">
        <a-row :gutter="24">
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="流转卡号" field="grayCode" :rules="[{ required: true, message: '流转卡号必填' }]"
                         :validate-trigger="['change', 'blur']">
              <a-input allow-clear class="bacClass" disabled v-model="dataForm.flowCardCode"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="开单日期">
              <a-input disabled style="width: 270px;" v-model="dataForm.createOrderDate"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="客户名称">
              <a-input allow-clear class="bacClass" disabled v-model="dataForm.customName"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="计划单号">
              <a-input allow-clear class="bacClass" disabled/>
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="加工类型">
              <a-input allow-clear class="bacClass" disabled v-model="dataForm.machinType"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="作业类型">
              <a-input allow-clear class="bacClass" disabled v-model="dataForm.dyeingType"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="客户订单号">
              <a-input allow-clear class="bacClass" disabled v-model="dataForm.clientPlanOrderCode"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="交货日期">
              <a-input style="width: 270px;" disabled v-model="dataForm.lastDeliveryTime"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="色号">
              <a-input allow-clear class="bacClass" disabled v-model="dataForm.colorCode"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="色称">
              <a-input allow-clear class="bacClass" disabled v-model="dataForm.colorName"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="对色资料">
              <a-input allow-clear class="bacClass" disabled v-model="dataForm.contrastColor"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="4" :xl="8" :lg="12" :md="12" :xs="24">
            <a-form-item label="等待工序">
              <a-input allow-clear class="bacClass" disabled v-model="dataForm.process"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :xxl="4" :xl="4" :lg="12" :md="12" :xs="24">
            <a-form-item label="对色光源">
              <a-input allow-clear class="bacClass" disabled v-model="dataForm.coloringIlluminant"/>
            </a-form-item>
          </a-col>
          <a-col :xxl="20" :xl="20" :lg="24" :md="24" :xs="24">
            <a-form-item label="生产流程">
              <a-input allow-clear disabled v-model="dataForm.productionProcess"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div style="display: flex;height:75%;">
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressDragLeaveHidesColumns="true"
                         :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="firstGridReady"
                         style="height:100%%;width: 38%;" class='ag-theme-alpine' :defaultColDef="FirstDefaultColDef"
                         :rowData="dataForm.circulatCardDetailed" :columnDefs="firstCfsValue"
                         @rowClicked="toFirstRowClick"
                         :localeText="FirstLocaleTextData"/>
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                         @grid-ready="gridReady" style="height:100%%;width: 62%;" class='ag-theme-alpine'
                         :defaultColDef="defaultColDef" :rowData="dataForm.below" :columnDefs="cfsValue"
                         @rowClicked="toRowClick"
                         :localeText="localeTextData"/>
      </div>
      <template #footer>
        <a-button type="primary" size="mini" @click="adjustWeightHandler">
          调整重量
        </a-button>
        <a-button type="primary" size="mini" @click="reverseOperHandler">
          返退工序
        </a-button>
        <a-button type="primary" size="mini" @click="insertOperHandler">
          插入工序
        </a-button>
        <a-button type="primary" size="mini" @click="addOperHandler">
          新增工序
        </a-button>
        <a-button type="primary" size="mini" @click="delOperHandler">
          删除工序
        </a-button>

        <!-- <a-button type="primary" size="mini" @click="saveHandler">
            保存
        </a-button> -->
        <a-button size="mini" @click="pageData.showAdd = false">
          关闭
        </a-button>
      </template>
    </a-drawer>
    <a-modal width="auto" v-model:visible="pageData.isModalShow" :title="pageData.modalTitle"
             @cancel="pageData.isModalShow = false" @before-ok="handleBeforeOk">
      <a-form :model="pageData.sectionData" v-if="pageData.showType === 0" auto-label-width>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="name" label="工段">
              <a-input class="bacClass" allow-clear v-model="pageData.sectionData.section"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="name" label="工序">
              <a-input class="bacClass" allow-clear v-model="pageData.sectionData.process"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="name" label="作业性质">
              <a-input class="bacClass" allow-clear v-model="pageData.sectionData.jobMent"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="name" label="责任部门">
              <!-- <a-input class="bacClass aInputLine" allow-clear v-model="pageData.sectionData.dutyDep" /> -->
              <a-cascader v-model:model-value="pageData.sectionData.dutyDep" :options="pageData.departList"
                          allow-clear ref="toDepart" title="责任部门" @focus="hasDepartBox"
                          :loading="pageData.departLoading" @change="dutyDepChange" value-key="label"
                          popup-container="html"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="name" label="回修原因">
              <a-input class="bacClass" allow-clear v-model="pageData.sectionData.cause"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-form :model="pageData.newWeightData" v-else-if="pageData.showType === 1" auto-label-width>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="name" label="布号">
              <a-input class="bacClass" disabled allow-clear v-model="pageData.rowClickData.greyCode"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="name" label="品名">
              <a-input class="bacClass" disabled allow-clear v-model="pageData.rowClickData.productName"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="name" label="门幅">
              <a-input class="bacClass" disabled allow-clear v-model="pageData.rowClickData.efficacious"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="name" label="克重">
              <a-input class="bacClass" disabled allow-clear v-model="pageData.rowClickData.gramWeight"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="name" label="原匹数">
              <a-input class="bacClass" disabled allow-clear v-model="pageData.rowClickData.houseNum"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="name" label="新匹数">
              <a-input-number :min="0" v-model="pageData.newWeightData.houseNumNew" class="bacClass"
                              allow-clear/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="name" label="原重量">
              <a-input class="bacClass" disabled allow-clear v-model="pageData.rowClickData.orderWeight"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="新重量" field="orderWeightNew" :validate-trigger="['change', 'blur']"
                         :rules="[{ required: true, message: '新重量必填' }]">
              <a-input-number :min="0" v-model="pageData.newWeightData.orderWeightNew" class="bacClass"
                              disabledallow-clear/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="name" label="原米数">
              <a-input class="bacClass" disabled allow-clear v-model="pageData.rowClickData.meters"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="name" label="新米数">
              <a-input-number :min="0" v-model="pageData.newWeightData.meters" class="bacClass" allow-clear/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <a-form :model="pageData.firstClickData" v-else-if="pageData.showType === 2" auto-label-width>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="name" label="返退工序">
              <a-input class="bacClass" disabled allow-clear v-model="pageData.firstClickData.process"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="name" label="工段">
              <a-input class="bacClass" disabled allow-clear v-model="pageData.firstClickData.section"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="name" label="作业性质">
              <a-input class="bacClass" disabled allow-clear v-model="pageData.firstClickData.jobMent"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="name" label="责任部门">
              <a-input class="bacClass" disabled allow-clear v-model="pageData.firstClickData.dutyDep"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="name" label="原因">
              <a-input class="bacClass" disabled allow-clear v-model="pageData.firstClickData.cause"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts">
import {post} from '@/api/http'
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import {reactive, ref, onMounted} from 'vue'
import emitter from "@/hooks/useEventBus";

import {localeText} from '@/api/aggridZw'
import {useTable} from '@/hooks/table';
import {adjuct} from '@/api/DyeingshopManagement/circulatCardAdjuct';
import {Message, Modal} from '@arco-design/web-vue';
import {selectDataFn} from '@/api/DyeingshopManagement/getOrderFn';
import {slicing} from '@/utils/caseFrimAndSecRig'
import {pagingList} from "@/api/paging";

export default {
  name: "circulCardAdjuct",
  components: {PageTabelLayout, },
  setup() {
    const headerShow = ref<boolean>(true);
    const adjuctApi = adjuct();
    const changHeadShow = (boolVal: boolean) => {
      headerShow.value = boolVal;
      emitter.emit('window-change');
    };
    onMounted(() => {
      emitter.emit('window-change');
      selectHandler();
    });
    const handlerState = ref<number>(1);
    const selectHandler = () => {
      console.log(handlerState.value);
      if (handlerState.value === 1) {
        emitter.emit('refresh-cylinderAjuctInfo');
      } else {
        emitter.emit('refresh-cylinderDetailInfo');
      }
    };
    const IsuspendHandler = (setIndex: any) => {
      if (setIndex > 0) {
        emitter.emit('stop-cylinderAjuctInfo', 1);
      } else {
        emitter.emit('stop-cylinderAjuctInfo', 0);
      }
    };

    const searchData = reactive<{
      flowCardCode: string,
      customName: string,
      auditDate: string,
      auditDate2: string
    }>({
      flowCardCode: '',
      customName: '',
      auditDate: '',
      auditDate2: ''
    });

    const dateChange = (date: any) => {
      searchData.auditDate = date ? date[0] : '';
      searchData.auditDate2 = date ? date[1] : '';
    };
    const dataForm = reactive<{
      clientPlanOrderCode: string,
      colorCode: string,
      colorName: string,
      coloringIlluminant: string,
      contrastColor: string,
      createOrderDate: string,
      customName: string,
      dyeingType: string,
      flowCardCode: string,
      lastDeliveryTime: string,
      machinType: string,
      process: string,
      productionProcess: string,
      circulatCardDetailed: any[],
      below: any[],
      id: any,
    }>({
      id: null,
      clientPlanOrderCode: '',
      colorCode: '',
      colorName: '',
      coloringIlluminant: '',
      contrastColor: '',
      createOrderDate: '',
      customName: '',
      dyeingType: '',
      flowCardCode: '',
      lastDeliveryTime: '',
      machinType: '',
      process: '',
      productionProcess: '',
      below: [],
      circulatCardDetailed: [],
    });

    const exportHandler = () => {
      emitter.emit('export-cylinderDetailInfo');
    };

    const changHandler = (e: number | string) => {
      handlerState.value = +e;
      selectHandler();
    };
    let flowCardCode: string = "";
    const changeAdjuct = async (data: any) => {

      flowCardCode = data.flowCardCode;
      // console.log(data);
      await adjuctApi.getFindAdjuctUpper({flowCardCode: data.flowCardCode}).then((res: any) => {
        if (res.code === 200) {
          pageData.showAdd = true;
          let data = res.data;
          for (let key in data) {
            dataForm[key] = data[key];
          }
          ;
          // console.log(data.below,dataForm.below);
          // gridOption.value.setRowData(data.circulatCardDetailed);
          gridOption.value?.setRowData(data.below);
          firstGridOption.value?.setRowData(data.circulatCardDetailed);
          pageData.firstClickData = {};
        } else {
          Message.error({
            content: res.message,
            duration: 5000,
          });
        }
        // console.log(res.data);
        // if(res.code === 200){
        // table.handleSuccess(res.data);
        // gridOption.value.setRowData(res.data);
        // }
      })
    };

    const pageData = reactive<({
      showAdd: boolean,
      modalTitle: string,
      isModalShow: boolean,
      showType: number,
      rowClickData: any,
      newWeightData: {
        houseNumNew: number,
        id: any,
        orderWeightNew: number,
        meters: number
      },
      firstClickData: any,
      sectionData: {
        section: string;
        dutyDep: string;
        cause: string;
        circulatCardId: any;
        process: string;
        jobMent: string;
      },
      departList: any[],
      departLoading: boolean,
      retrogressionData: {
        circulatCardId: any,
        num: any
      },
      cardList: any[],
    })>({
      showAdd: false,
      modalTitle: '',
      isModalShow: false,
      showType: 0,
      rowClickData: {},
      firstClickData: {},
      newWeightData: {
        houseNumNew: 0,
        id: '',
        orderWeightNew: 0,
        meters: 0,
      },
      sectionData: {
        section: '',
        dutyDep: '',
        cause: '',
        circulatCardId: null,
        process: '',
        jobMent: ''
      },
      departList: [],
      departLoading: false,
      retrogressionData: {
        circulatCardId: null,
        num: null
      },
      cardList: [],
    });
    const hasDepartBox = async () => {
      //获取部门
      pageData.departLoading = true;
      await selectDataFn().getTreeDepart({}).then((res) => {
        if (res.code === 200) {
          pageData.departList = res.data;
          // cb(res.data);
        } else {
          Message.error({
            content: "查询失败！",
            duration: 5000,
          });
        }
        pageData.departLoading = false;
      });
    }
    const toRowClick = ({data}: any) => {
      pageData.rowClickData = data;
      // console.log(pageData.rowClickData);
    };
    const adjustWeightHandler = () => {
      if (Object.values(pageData.rowClickData).length === 0) {
        Message.error("请选择需要调整重量的数据");
      } else {
        pageData.isModalShow = true;
        pageData.showType = 1;
        pageData.modalTitle = '调整重量'
      }

    };
    const toFirstRowClick = ({data}: any) => {
      // console.log(data);
      // firstClickData
      pageData.firstClickData = data;
    }

    const reverseOperHandler = () => {
      if (Object.values(pageData.firstClickData).length === 0) {
        Message.error("请选择需要需要返退的工序");
      } else {
        pageData.isModalShow = true;
        pageData.showType = 2;
        pageData.modalTitle = '返退工序'
      }

    }
    const addOperHandler = () => {
      pageData.isModalShow = true;
      pageData.showType = 0;
      pageData.modalTitle = '新增工序';
      for (let key in pageData.sectionData) {
        pageData.sectionData[key] = ""
      }
    }
    const insertOperHandler = () => {
      // console.log(pageData.firstClickData);
      if (Object.values(pageData.firstClickData).length === 0) {
        Message.error("请选择需要插入到拿哪条工序的数据");
      } else {
        pageData.isModalShow = true;
        pageData.showType = 0;
        pageData.modalTitle = '插入工序';
        for (let key in pageData.sectionData) {
          pageData.sectionData[key] = ""
        }
      }

    };
    const delOperHandler = () => {
      let vals = firstGridOption.value.getSelectedRows().map((v: any) => {
        return v.id
      });
      // console.log( gridOption.value);
      if (vals.length > 0) {
        Modal.confirm({
          title: "提示",
          content: "确定要批量删除选中数据吗？",
          cancelText: "取消",
          okText: "删除",
          onOk: async () => {
            const promises = vals.map((id: any) => {
              return adjuctApi.delProcess(id);
            });
            Promise.all(promises).then((res: any) => {
              let resStatus = res.every((v: any) => v.code === 200)
              if (resStatus) {
                Message.success("数据删除成功");
                changeAdjuct({flowCardCode})
              } else {
                Message.error("数据删除失败");
              }
            }).catch(error => {
              console.log(error)
            });
          },
        });
      } else {
        Message.info("请选择需要删除的数据");
      }
    };
    const toDepart = ref();
    const dutyDepChange = () => {
      setTimeout(() => {
        if (toDepart.value.selectViewValue.length > 0) {
          pageData.sectionData.dutyDep = slicing(toDepart.value.selectViewValue[0]['label'])
        }
      }, 100)
    };
    const handleBeforeOk = async () => {
      if (pageData.showType === 0) {
        if (pageData.firstClickData.id) {
          pageData.sectionData.circulatCardId = pageData.firstClickData.circulatCardId;
          await adjuctApi.insertProcess({...pageData.sectionData}).then((res: any) => {
            //   console.log(res);
            if (res.code === 200) {
              pageData.isModalShow = false;
              Message.success(res.message);
              changeAdjuct({flowCardCode})
            } else {
              Message.error(res.message);
            }
          })
        } else {
          pageData.sectionData.circulatCardId = dataForm.id;
          await adjuctApi.addProcess({...pageData.sectionData}).then((res: any) => {
            if (res.code === 200) {
              pageData.isModalShow = false;
              Message.success(res.message);
              changeAdjuct({flowCardCode})
            } else {
              Message.error(res.message || '数据新增失败');
            }
          })
        }
      } else if (pageData.showType === 1) {
        pageData.newWeightData.id = pageData.rowClickData.cardId;
        await adjuctApi.editFindWeight({...pageData.newWeightData}).then(async (res: any) => {
          if (res.code === 200) {
            pageData.isModalShow = false;
            await adjuctApi.getFindWeight().then(data => {
              console.log(data);
            })
          } else {
            Message.error(res.message);
          }
        })
      } else if (pageData.showType === 2) {
        pageData.retrogressionData.circulatCardId = pageData.firstClickData.circulatCardId;
        pageData.retrogressionData.num = pageData.firstClickData.num;
        await adjuctApi.registerProcess({...pageData.retrogressionData}).then(async (res: any) => {
          if (res.code === 200) {
            pageData.isModalShow = false;
            Message.success(res.message);
            changeAdjuct({flowCardCode})
          } else {
            Message.error(res.message);
          }
        })
      }
    };


    //表格方面
    const gridOption = ref();
    const firstGridOption = ref();
    const gridReady = (params: any) => {
      gridOption.value = params.api;
      //调整表格自适应大小
    }
    const firstGridReady = (params: any) => {
      firstGridOption.value = params.api;
    }
    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
      width: 150
    };
    const FirstDefaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
      width: 130
    };
    let firstCfsValue: any = [
      {
        headerName: "工段",
        field: "section",
      },
      {
        headerName: "工序",
        field: "process",
      },
      {
        headerName: "工序说明",
        field: "cause",
      },
      {
        headerName: "作业性质",
        field: "jobMent",
      },
      {
        headerName: "责任部门",
        field: "dutyDep",
      },
    ];
    let cfsValue: any = [
      {
        headerName: "工序计划开始时间",
        field: "planBeginTime",
      },
      {
        headerName: "工序计划结束时间",
        field: "planFinshTime",
      },
      {
        headerName: "工序实际开始时间",
        field: "realityBeginTime",
      },
      {
        headerName: "工序实际结束时间",
        field: "realityFinishTime",
      },
      {
        headerName: "布号",
        field: "greyCode",
      },
      {
        headerName: "品名",
        field: "productName",
      },
      {
        headerName: "匹数",
        field: "houseNum",
      },
      {
        headerName: "重量",
        field: "orderWeight",
      },
      {
        headerName: "门幅",
        field: "efficacious",
      },
      {
        headerName: "米数",
        field: "meters",
      },
      {
        headerName: "克重",
        field: "gramWeight",
      },
      {
        headerName: "车号",
        field: "region",
      },
      {
        headerName: "计件日期",
        field: "circulatCard",
      },
      {
        headerName: "开始工号",
        field: "beginCode",
      },
      {
        headerName: "结束工号",
        field: "finishCode",
      },
      {
        headerName: "开始员工",
        field: "beginStaff",
      },
      {
        headerName: "结束员工",
        field: "finishStaff",
      },
      {
        headerName: "开始班次",
        field: "beginClasses",
      },
      {
        headerName: "结束班次",
        field: "finishClasses",
      },
      {
        headerName: "开始班组",
        field: "circulatCard",
      },
      {
        headerName: "结束班组",
        field: "circulatCard",
      },

      {
        headerName: "回修原因",
        field: "circulatCard",
      },
    ];
    let a = [{
      showRowGroup: 'hide_def',
      "headerName": "",
      "checkboxSelection": true,
      "headerCheckboxSelection": true,
      "pinned": "left",
      "width": 50,
      resizable: false,
      filter: false,
      sortable: false,
      minWidth: 50,
      maxWidth: 50,
      lockPosition: "left",
    }]
    firstCfsValue = a.concat(firstCfsValue);
    const localeTextData: any = ref(localeText);
    const FirstLocaleTextData: any = ref(localeText);
    const table = useTable();
    const pagingList1: any = ref(pagingList)
    // saveHandler,

    //下拉框  流程卡号
    const focusSel4 = () => {
      selCxAll4({"flowCardCode": ""});
    }
    const options4 = ref<any>(pageData.cardList);
    const loading4 = ref(false);
    const handleSearch4 = (value: any) => {
      if (value) {
        const ob = {flowCardCode: value}
        loading4.value = true;
        selCxAll4(ob);
        options4.value = pageData.cardList;
        loading4.value = false;
      } else {
        options4.value = []
      }
    };

    function selCxAll4(val: any) {
      post({
        url: "aps/circulatCard/getDropValue",
        data: val
      }).then(({data, code}: any) => {
        if (code === 200) {
          pageData.cardList = data;
        } else {
        }
      });
    }

    return {
      focusSel4,
      handleSearch4,
      selCxAll4,
      options4,
      loading4,
      pagingList1,
      headerShow,
      handlerState,
      selectHandler,
      dataForm,
      searchData,
      changHeadShow,
      exportHandler,
      changHandler,
      pageData,
      adjustWeightHandler,
      insertOperHandler,
      delOperHandler,
      localeTextData,
      defaultColDef,
      gridReady,
      cfsValue,
      firstCfsValue,
      table,
      handleBeforeOk,
      dateChange,
      reverseOperHandler,
      addOperHandler,
      changeAdjuct,
      firstGridReady,
      FirstDefaultColDef,
      FirstLocaleTextData,
      toRowClick,
      toFirstRowClick,
      hasDepartBox,
      dutyDepChange,
      toDepart,
      IsuspendHandler
    }
  },
}
</script>
<style lang="less" scoped>
.main-container {
  height: 100%;
}


.arco-drawer-header .arco-drawer-title {
  width: 100%;
}


.bacClass {
  width: 270px;
}

:deep(.arco-input-wrapper .arco-input[disabled]) {
  -webkit-text-fill-color: #000 !important;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

.aInputLine {
  border: 1px solid #c9cdd3;
  background: #fff;
}

:deep(.arco-picker input) {
  padding-left: 0 !important;
}

:deep(.arco-picker) {
  padding-left: 0 !important;
}

:deep(.arco-picker-separator) {
  padding: 0 !important;
}

</style>